﻿<%@ Page Title="" Language="C#" MasterPageFile="~/Views/Shared/Site.Master" Inherits="System.Web.Mvc.ViewPage<dynamic>" %>

<asp:Content ID="Content1" ContentPlaceHolderID="PageTitle" runat="server">
    <title>发件箱</title>
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="PageStyles" runat="server">
    <style type="text/css">
        .message
        {
            clear: both;
            margin-bottom: 10px;
            padding: 5px;
            height: 110px;
        }
        
        div.message div.meta
        {
            color: #666666;
            font-size: 12px;
            margin: 5px 0;
        }
        div.message h1 a.needConfirm
        {
            color: red;
            text-decoration: none;
            font-size: 18px;
        }
        
        div.message h1 a.notNeedConfirm
        {
            color: #000000;
            text-decoration: none;
            font-size: 18px;
        }
        div.message div.content
        {
        }
        div.formatted_text_body.rich_text
        {
            margin-bottom: 10px;
        }
        
        div.formatted_text_body
        {
            font-size: 13px;
            line-height: 1.425em;
        }
    </style>
</asp:Content>
<asp:Content ID="Content3" ContentPlaceHolderID="PageScripts" runat="server">
    <script src="../../Scripts/jquery.quickpaginate.js" type="text/javascript"></script>
    <script type="text/javascript">
    //************* URL常量
    //************* 全局变量
    var g_Var = {
        "messageTable": null

    };
    //************* 常量定义
    var StaticResource = {
};


//************* Accessor访问器
var EzAccessor = {};

if (ezmock.IS_MOCKED) {
  
} else {
    var realEzAccessor = {
        'getMessageList': function () {
            return  <%= ViewData["Outbox"] %>;
        },

        'getCurrentUser': function () {
            return <%= ViewData["CurrentUser"] %>;
        },

        'doShowMessage': function (messageId) {

            window.location.href = "show?TopicId=" + messageId;
        }
    };
    EzAccessor = realEzAccessor;
}

function quickPage() {
    $("#cmbOutBox .message").quickpaginate({ perpage: 10, showcounter: true, pager: $("#pageCount") });
}

function bindOutboxMessageList(messageList) {
    if (messageList.length != 0) {
        var messageOutDom = $('<div id="cmbOutBox"></div>');

        for (var key in messageList) {
            //信件参与者
            var  partnerStr = '<div class="meta">参与者: {groupInfo}  {userInfo} <span style="float:right;"> {createOn}<span></div>';
            var gorupInfo = messageList[key].Topic.Participator.GroupParticipators;
            var userInfo = messageList[key].Topic.Participator.UserParticipators; 
            
            if(gorupInfo.length != 0 ){
                for (var group in gorupInfo){
                    partnerStr = partnerStr.replace("{groupInfo}", gorupInfo[group].Description);     
                }
            }
            else{
                partnerStr = partnerStr.replace("{groupInfo}", " ");   
            }


            if(userInfo.length != 0 ){ 
                var nameList = "";
                var number  =  0;
                for(var user in userInfo){
                        
                    if (user < 5) {
                        nameList = nameList + userInfo[user].Name + " ";
                    }
                    else {
                        number = user;
                    }
                }
                if (number >= 5) {
                        nameList = nameList + "等";
                    }
                partnerStr = partnerStr.replace("{userInfo}", nameList);
            }
            else{
                partnerStr = partnerStr.replace("{userInfo}", " "); 
            }
            //时间
            var time = Date.fromEpoch(messageList[key].Topic.CreateOn);
            var createOn = time.toShortDateTime();
            partnerStr = partnerStr.replace("{createOn}", createOn);
                                   
            //信件标题
            var title = messageList[key].Topic.MessageTitle;
            titleStr = null;
            if (title.length != 0) {
                titleStr = '<span class="msgTitle" style="font-weight:bold;font-size:16px;">{title}</span>&nbsp;';
                titleStr = titleStr.replace("{topicId}", messageList[key].Topic.MessageId)
                                   .replace("{title}", title);
            }

            //信件内容
            var content = messageList[key].Topic.MessageText;
            var contentStr = '<div class="formatted_text_body"><div>{content}</div></div>';
            contentStr = contentStr.replace("{content}", content);

            var messageDom = $('<div class="message"></div>');
            var titleAndConfirmDom = $('<div></div>')
            var contentDom = $('<div class="content"></div>');
            var messageDom = $('<div class="message"></div>');
            var lableDom = $('<div class="msgLbl"></div>');
                
           //已确认人数
            //是否需要确认
            var comfirmNumStr = null;
            var isNeedConfirm = messageList[key].Topic.NeedConfirm;
            if(isNeedConfirm == true){
                comfirmNumStr = '<p style="color: #090;">已确认({number})</p>';
                comfirmNumStr = comfirmNumStr.replace("{number}", messageList[key].ConfirmedNumber);
            }

            $(titleAndConfirmDom).append(titleStr);

            $(contentDom).append(partnerStr)
                         .append(titleAndConfirmDom)
                         .append(contentStr)
                         .append(comfirmNumStr);
                
            $(messageDom).append(contentDom);
                
            $(lableDom).append(messageDom);
            $(lableDom).data("messageId", messageList[key].Topic.MessageId);


            //定义action
            lableDom.click(function() {
                var messageId = $(this).data("messageId");
                EzAccessor.doShowMessage(messageId);
            });

            lableDom.hover(function() {
                $(this).css({
                    "background-color": "#eee",
                    "cursor" : "pointer",
                    "-webkit-border-radius" : "8px"
                });
            });
            lableDom.mouseleave(function(){
                $(this).css({
                    "background-color": "#fff"   
                });    
            });
                
            $(messageOutDom).append(lableDom);
        }

        $('#messageOutbox').append(messageOutDom);
    }
    else {
        var noMessageDom = '<div style="text-align:center">您还没有信件</div>';
        $('#messageOutbox').append(noMessageDom);
    }

}


function deleMessage(id) {
    //增添tips
    var deletInfo = '<p>你确定要删除这条信件吗？</p><div  id="delete">删除</div>&nbsp;或者&nbsp;<a id="cancel">取消</a>';

    //去除已有的tips
    $('.tip-yellow').remove();

    $('#' + id).poshytip({
        content: deletInfo,
        showOn: 'focus',
        alignTo: 'target',
        alignX: 'left',
        alignY: 'center',
        offsetX: 5
    });

    $('#' + id).poshytip('show');

    //取消删除
    $('#cancel').click(function () {
        $('.tip-yellow').remove();

    });

    //确定删除
    $('#delete')
    .button({
        icons: {
            primary: "ui-icon-trash"
        },
        text: true
    })
    .click(function () {
        $('.tip-yellow').remove();

        var messageTr = $('#' + id).parent().parent();
        var position = g_Var['messageTable'].fnGetPosition(messageTr[0]);
        g_Var['messageTable'].fnDeleteRow(position);

    });
}


function initPage() {
    $('#tip_Remind').eztips();
    $('#tip_inbox').eztips();
    
    var messageList = EzAccessor.getMessageList();
    bindOutboxMessageList(messageList);
    quickPage();
}


function initPageEvent() {
    $('#inbox').click(function () {
        window.location.href = "/message/inbox";
    });
}
$(function () {
    initPage();
    initPageEvent();
});
    </script>
</asp:Content>
<asp:Content ID="Content4" ContentPlaceHolderID="PageHead" runat="server">
    <%
        Html.RenderPartial("_sayHello"); %>
</asp:Content>
<asp:Content ID="Content5" ContentPlaceHolderID="PageContent" runat="server">
    <div id="page-head" class="page-head">
        <img src="../../Content/icons/message_outbox.png" style="width: 48px; height: 48px;"
            alt="outbox" />
        <span class="title">我的发件箱</span>
    </div>
    <div id="page-body">
        <div id="messageOutbox">
        </div>
    </div>
    <div class="page-submit">
        <div id="pageCount">
        </div>
    </div>
</asp:Content>
<asp:Content ID="Content6" ContentPlaceHolderID="PageShortcut" runat="server">
    <div id="shortcuts" class="box">
        <button id="newMessage" style="width: 100%;">
            写新信件</button>
        <script>
            $(function () {
                $("#newMessage").button({
                    icons: {
                        primary: "ui-icon-mail-closed"
                    },
                    text: true
                });

                $("#newMessage").click(function () {
                    window.location = "/message/send";
                });
            });
        </script>
    </div>
</asp:Content>
<asp:Content ID="Content7" ContentPlaceHolderID="PageFoot" runat="server">
    <div id="tip_Remind" style="display: none;">
        <h1>
            小贴士:</h1>
        <p class="indent">
            信件为红色的标题，说明您希望接受者在查阅过该信件后，予以确认。
        </p>
    </div>
    <div id="tip_inbox" style="display: none;">
        <h1>
            <img src="../../Content/icons/message_inbox.png" style="width: 48px; height: 48px;"
                alt="inbox" /><a id="inbox">我的收件箱</a>
        </h1>
    </div>
</asp:Content>
